/**
 * Material Design Drawer
 */

export default class Drawer {
  constructor(element) {
    if (typeof element === 'string') {
      element = $(element);
    }

    this.element = element;

    this._initRender();
  }

  styleData = {
    transitionDuration: 225
  }

  show() {
    $(document.body).css("overflow", "hidden");
    
    this.element.addClass("active visible");
  }
  
  hide() {
    $(document.body).css("overflow", "visible");

    this.backgroundNode.remove();
    this.element.removeClass("active");

    setTimeout(() => {
      this.element.removeClass("visible");
    }, this.styleData.transitionDuration);
  }

  _initRender() {
    let backgroundHtml = '<div class="drawer-background"></div>';
    this.element.prepend(backgroundHtml);

    this.backgroundNode = this.element.find(".drawer-background");
    this.contentNode = this.element.find(".drawer-content");

    this.backgroundNode.css({
      "transition-property": "opacity",
      "transition-duration": this.styleData.transitionDuration + "ms",
      "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
      "transition-delay": "0ms"
    });
  
    this.contentNode.css({
      "transition-property": "transform",
      "transition-duration": this.styleData.transitionDuration + "ms",
      "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
      "transition-delay": "0ms"
    });

    // bind event
    this.backgroundNode.on("click", () => {
      this.hide();
    });

    this.contentNode.find("a").on("click", () => {
      this.hide();
    });
  }
};
